<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator="/">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>订单管理</a></el-breadcrumb-item>
		  <el-breadcrumb-item>订单列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区 -->
		<el-card>
			<el-row>
				<!-- 搜索框区域 -->
				<el-col :span="8">
					<el-input placeholder="请输入内容" clearable v-model="queryInfo.query" @clear="userClear" class="input-with-select"> 
					  <el-button slot="append" icon="el-icon-search" @click="search" ></el-button>
					</el-input>
				</el-col>
			</el-row>
			<!-- 表格视图 -->
				<el-table 
				:data="ordersForm" 
				border 
				style="margin-top: 15px;" 
				:header-cell-style="{textAlign: 'center'}"  
				:cell-style="{ textAlign: 'center' }"
				>
					<el-table-column label="#" type="index" ></el-table-column>
					<el-table-column  label="订单编号" prop="order_number"  ></el-table-column>
					<el-table-column label="订单价格(元)" prop="order_price" width="120"></el-table-column>
					<el-table-column label="是否付款" prop="" width="120">
						<template slot-scope="scope">
							<el-tag type="danger" v-if="scope.row.pay_status == 0">未付款</el-tag>
							<el-tag type="success" v-if="scope.row.pay_status == 1">已付款</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="是否发货" prop="is_send" width="120"></el-table-column>
					<el-table-column label="下单时间" prop="create_time" width="200">
						<template slot-scope="scope">
							{{scope.row.create_time | dateFormat}}
						</template>
					</el-table-column>
						<el-table-column label="操作" width="160">
							<template slot-scope="scope">
									<el-button size="mini" type="primary" icon="el-icon-edit" @click="modify"></el-button>
									<el-button size="mini" type="success" icon="el-icon-location" @click="logistics"></el-button>
							</template>
						</el-table-column>
				</el-table>
				<!-- 分页视图 -->
				<el-pagination
				style="display: flex;justify-content: center;"
				     @size-change="handleSizeChange"
				     @current-change="handleCurrentChange"
				     :current-page="queryInfo.pagenum"
				     :page-sizes="[ 5, 10, 20]"
				     :page-size="queryInfo.pagesize"
				     layout="total, sizes, prev, pager, next, jumper"
				     :total="total">
				  </el-pagination>
				  <!-- 修改参数对话框 -->
				  <el-dialog title="修改地址" :visible.sync="modifyFormVisible" @close="editDialog">
				    <el-form ref="editFormRef" :rules="addFormRules" :model="paramcation" label-width="80px" class="demo-ruleForm">
						<!-- <el-cascader
						    v-model="value"
						    :options="options"
						    :props="{ expandTrigger: 'hover' }"
						    @change="handleChange"></el-cascader> -->
				      <el-form-item label="详细地址" prop="attr_name">
				    	<el-input  v-model="paramcation.attr_name" placeholder="详细地址"></el-input>
				      </el-form-item>
				      </el-form>
				    <div slot="footer" class="dialog-footer">
				      <el-button @click="modifyFormVisible = false">取 消</el-button>
				      <el-button type="primary" @click="modifyFormVisible = false">确 定</el-button>
				    </div>
				  </el-dialog>
				  <!-- 查看物流进度对话框 -->
				  <el-dialog title="修改地址" :visible.sync="logisticsFormVisible" @close="editDialog">
				    <el-form ref="editFormRef" :rules="addFormRules" :model="paramcation" label-width="80px" class="demo-ruleForm">
						
				      </el-form>
				    <div slot="footer" class="dialog-footer">
				      <el-button @click="logisticsFormVisible = false">取 消</el-button>
				      <el-button type="primary" @click="logisticsFormVisible = false">确 定</el-button>
				    </div>
				  </el-dialog>
		</el-card>
	</div>
	
</template>

<script>
	export default{
		data(){
			return{
				ordersForm:[],		//获取订单数据
				queryInfo:{			//获取订单列表参数对象
					query:'',		//搜索框内容
					pagenum:1,		//页数
					pagesize:10		//每页显示条数
				},
				paramcation:{			//添加地址对话框数据
					address:[],
					attr_name:''
				},
				modifyFormVisible:false,		//修改地址对话框默认显示隐藏
				logisticsFormVisible:false,		//查看物流进度对话框默认显示隐藏
				total:0,			//获取数据总条数	
				addFormRules: {		//添加用户表单验证规则
					  attr_name: [
						{ required: true, message: '请输入内容', trigger: 'blur' },
						{ min: 1, max: 10, message: '长度在 1 ~ 10 个字符', trigger: 'blur' }
					  ],
				},
			}
		},
		methods:{
			handleSizeChange(newSize){		//监听的切换当前页面显示多少条
				this.queryInfo.pagesize = newSize
				this.getOrdersList()
			},
			handleCurrentChange(newPage){		//监听页码值发生变化
				this.queryInfo.pagenum = newPage
				this.getOrdersList()
			},
			userClear(){			//搜索框清空重新渲染页面
				this.getOrdersList()
			},
			editDialog(){		//监听修改用户对话框的关闭时间事件
				this.$refs.editFormRef.resetFields()		//重置添加用户对话框数据
			},
			search(){		//点击搜索触发
			console.log(this.queryInfo)
				if(this.queryInfo.query != ''){
					this.getOrdersList()
				}
			},
			modify(){		//点击修改地址事件
				this.modifyFormVisible = true
			},
			logistics(){		//点击查看物流进度事件
				this.logisticsFormVisible = true
				var id = 804909574412544580		//测试物流运单号
				this.$axios.get('/kuaidi/804909574412544580').then(data => {
					console.log(data.data)
				})
			},
			getOrdersList(){			//获取所有订单列表
				this.$axios.get('orders',{params:this.queryInfo}).then(data => {
					console.log(data.data)
					this.total = data.data.data.total
					this.ordersForm = data.data.data.goods
				})
			}
		},
		created(){
			this.getOrdersList()
		}
	}
</script>

<style lnag="scss" scoped>
	.el-card{
		margin-top: 15px;
	}
</style>
